<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />添加项目信息
		</div>
		<el-tabs type="border-card">
			<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="200px">
				<el-tab-pane label="基本信息">
					<el-scrollbar max-height="380px">
						<el-form-item prop="customerId" label="所属客户">
							<el-select
								v-model="form.customerId"
								style="width: 50%; margin-right: 10px"
								filterable
								remote
								reserve-keyword
								remote-show-suffix
								placeholder="请选择所属客户"
								:remote-method="remoteMethod"
								:loading="loading"
							>
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							<el-button type="primary" @click="toAddCustom">添加客户</el-button>
						</el-form-item>
						<el-form-item prop="projectName" label="项目名称">
							<el-input v-model="form.projectName" style="width: 50%; margin-right: 10px" placeholder="请输入项目名称" />
							<el-checkbox
								style="position: relative; top: 3px"
								v-model="form.isImportant"
								true-label="1"
								false-label="2"
								label="重要项目"
								size="large"
							/>
						</el-form-item>
						<el-form-item prop="projectAdress" label="项目地址">
							<el-input v-model="form.projectAdress" style="width: 50%" placeholder="请输入项目地址" />
						</el-form-item>
						<el-form-item prop="projectContacts" label="联系人">
							<el-input v-model="form.projectContacts" style="width: 50%" placeholder="请输入联系人" />
						</el-form-item>
						<el-form-item prop="projectMobile" label="手机号">
							<el-input v-model="form.projectMobile" style="width: 50%" placeholder="请输入手机号" />
						</el-form-item>
						<el-form-item prop="projectStage" label="项目阶段">
							<el-select disabled v-model="form.projectStage" placeholder="请选择阶段" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_stage" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectCategory" label="项目分类">
							<el-select v-model="form.projectCategory" placeholder="请选择类型" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_category" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectDescribe" label="项目描述">
							<el-input v-model="form.projectDescribe" :rows="5" type="textarea" placeholder="请输入项目描述" />
						</el-form-item>
						<el-form-item label="备注说明" style="color: #f66c6c">
							<span style="color: #f66c6c"
								>项目描述中需要对项目的基本情况，甲方组织架构，决策机制，招投标方式，项目资金来源等相关情况进行充分描述，项目负责人随项目推进不断完善，如淘汰项目必须注明原因。</span
							>
						</el-form-item>
					</el-scrollbar>
				</el-tab-pane>
				<el-tab-pane label="附属信息">
					<el-scrollbar max-height="380px">
						<el-form-item prop="projectType" label="项目类型">
							<el-select v-model="form.projectType" placeholder="请选择项目类型" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_type" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectBuildType" label="建筑类型">
							<el-select v-model="form.projectBuildType" placeholder="请选择建筑类型" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_build_type" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectFireLevel" label="项目防火等级">
							<el-select v-model="form.projectFireLevel" placeholder="请选择项目防火等级" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_fire_level" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectBuildStructure" label="建筑结构">
							<el-select v-model="form.projectBuildStructure" placeholder="请选择建筑结构" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_build_structure" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="项目面积">
							单层面积<el-input-number
								style="width: 100px; margin: 0 5px"
								:controls="false"
								v-model="form.projectSingleArea"
								:precision="2"
								:step="0.01"
								:min="0"
								placeholder="请输入"
							/>m²， 总楼面积<el-input-number
								placeholder="请输入"
								:controls="false"
								v-model="form.projectTotalArea"
								style="width: 100px; margin: 0 5px"
								:precision="2"
								:step="0.01"
								:min="0"
							/>m²
						</el-form-item>
						<el-form-item label="项目楼层">
							所在楼层<el-input-number
								style="width: 100px; margin: 0 5px"
								:controls="false"
								v-model="form.projectCurrentFloor"
								:precision="0"
								:step="0"
								:min="0"
								placeholder="请输入"
							/>层， 总楼层<el-input-number
								placeholder="请输入"
								:controls="false"
								v-model="form.projectTotalFloor"
								style="width: 100px; margin: 0 5px"
								:precision="0"
								:step="0"
								:min="0"
							/>层
						</el-form-item>
						<el-form-item label="楼层高度">
							层高<el-input-number
								placeholder="请输入"
								style="width: 100px; margin: 0 5px"
								:controls="false"
								v-model="form.projectFloorHight"
								:precision="2"
								:step="0.01"
								:min="0"
							/>m， 梁下高<el-input-number
								placeholder="请输入"
								:controls="false"
								v-model="form.projectLiangHight"
								style="width: 100px; margin: 0 5px"
								:precision="2"
								:step="0.01"
								:min="0"
							/>m， 最低点高<el-input-number
								placeholder="请输入"
								:controls="false"
								v-model="form.projectMinHight"
								style="width: 100px; margin: 0 5px"
								:precision="2"
								:step="0.01"
								:min="0"
							/>m， 吊灯高<el-input-number
								placeholder="请输入"
								:controls="false"
								v-model="form.projectDengHight"
								style="width: 100px; margin: 0 5px"
								:precision="2"
								:step="0.01"
								:min="0"
							/>m
						</el-form-item>
						<el-form-item prop="progressFinishTime" label="项目交付时间">
							<el-date-picker
								clearable
								v-model="form.progressFinishTime"
								style="width: 380px"
								value-format="YYYY-MM-DD"
								type="date"
								:placeholder="`请选择项目交付时间`"
							></el-date-picker>
						</el-form-item>
						<el-form-item prop="projectIndustry" label="项目行业">
							<el-select v-model="form.projectIndustry" placeholder="请选择项目行业" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_industry" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectContent" label="项目类容">
							<el-select v-model="form.projectContent" placeholder="请选择项目类容" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_content" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="工作人员数量">
							<el-input-number
								style="width: 340px"
								:controls="false"
								v-model="form.projectStaffNum"
								:precision="0"
								:step="0"
								:min="0"
								placeholder="请输入"
							/>
						</el-form-item>
						<el-form-item prop="projectIdent" label="认证需求">
							<el-checkbox-group v-model="form.projectIdent">
								<el-checkbox v-for="item in project_ident" :key="item.value" style="position: relative; top: -3px" :label="item.value" size="large">
									{{ item.label }}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item prop="projectDesign" label="暖通专业设计需求">
							<el-checkbox-group v-model="form.projectDesign">
								<el-checkbox v-for="item in project_design" :key="item.value" style="position: relative; top: -3px" :label="item.value" size="large">
									{{ item.label }}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item prop="projectFloorDescribe" label="楼层及屋面承重及空间位置">
							<el-input v-model="form.projectFloorDescribe" style="width: 50%" placeholder="请输入楼层及屋面承重及空间位置" />
						</el-form-item>
						<el-form-item prop="projectExhaustGas" label="废气类型">
							<el-checkbox-group v-model="form.projectExhaustGas">
								<el-checkbox
									v-for="item in project_exhaust_gas"
									:key="item.value"
									style="position: relative; top: -3px"
									:label="item.value"
									size="large"
								>
									{{ item.label }}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item prop="projectAirDescribe" label="风井位置及尺寸">
							<el-input v-model="form.projectAirDescribe" style="width: 50%" placeholder="请输入风井位置及尺寸" />
						</el-form-item>
						<el-form-item prop="projectIsPiping" label="外立面是否可以走风管">
							<el-select v-model="form.projectIsPiping" placeholder="请选择外立面是否可以走风管" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_is_piping" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectColdHot" label="是否有冷热源，及其形式">
							<el-input v-model="form.projectColdHot" style="width: 50%" placeholder="请输入是否有冷热源，及其形式" />
						</el-form-item>
						<el-form-item prop="projectStrongElectricity" label="现有强电总功率">
							<el-input v-model="form.projectStrongElectricity" style="width: 50%" placeholder="请输入现有强电总功率" />
						</el-form-item>
						<el-form-item prop="projectDrainage" label="排水方式">
							<el-select v-model="form.projectDrainage" placeholder="请选择排水方式" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_drainage" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectDrainageSize" label="排水管总尺寸">
							<el-input v-model="form.projectDrainageSize" style="width: 50%" placeholder="请输入排水管总尺寸" />
						</el-form-item>
						<el-form-item prop="projectPipingType" label="现有给排水管材">
							<el-checkbox-group v-model="form.projectPipingType">
								<el-checkbox
									v-for="item in project_piping_type"
									:key="item.value"
									style="position: relative; top: -3px"
									:label="item.value"
									size="large"
								>
									{{ item.label }}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item prop="projectGassType" label="供气形式">
							<el-select v-model="form.projectGassType" placeholder="请选择供气形式" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in project_gass_type" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="projectSharpDescribe" label="是否有利旧项目，利旧范围">
							<el-input v-model="form.projectSharpDescribe" style="width: 50%" placeholder="请输入是否有利旧项目，利旧范围" />
						</el-form-item>
						<el-form-item prop="projectElevatorSize" label="主入口及电梯尺寸">
							<el-input v-model="form.projectElevatorSize" style="width: 50%" placeholder="请输入主入口及电梯尺寸" />
						</el-form-item>
						<el-form-item prop="projectFireFighting" label="是否含消防改造">
							<el-radio-group v-model="form.projectFireFighting">
								<el-radio v-for="item in project_fire_fighting" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-scrollbar>
				</el-tab-pane>
				<el-tab-pane label="大功率用电设备">
					<el-scrollbar max-height="380px">
						<el-button type="warning" @click="addItem">新增设备</el-button>
						<div class="item-row" v-for="(item, index) in form.projectDeviceBoList" :key="index">
							<div class="item-col">
								<el-form-item
									:prop="`projectDeviceBoList[${index}].deviceName`"
									label="设备名称："
									:rules="[{ required: true, message: `设备名不能为空`, trigger: 'blur' }]"
								>
									<el-input v-model="item.deviceName" placeholder="" />
								</el-form-item>
							</div>
							<div class="item-col">
								<el-form-item
									:prop="`projectDeviceBoList[${index}].devicePower`"
									label="设备功率："
									:rules="[{ required: true, message: `设备功率不能为空`, trigger: 'blur' }]"
								>
								<el-input v-model="item.devicePower" placeholder="" />
								</el-form-item>
							</div>
							<div class="item-col">
								<el-form-item
									:prop="`projectDeviceBoList[${index}].deviceSize`"
									label="设备尺寸："
									:rules="[{ required: true, message: `设备尺寸不能为空`, trigger: 'blur' }]"
								>
								<el-input v-model="item.deviceSize" placeholder="" />
								</el-form-item>
							</div>
								<el-button type="primary" style="position: relative;top:-10px" link @click="deleteRow(index)">删除</el-button>
						</div>
					</el-scrollbar>
				</el-tab-pane>
			</el-form>
		</el-tabs>

		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
import { addProject } from '@/api/project/project'
import { selectCustom } from '@/api/custom/custom'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const { proxy } = getCurrentInstance()
const {
	project_stage,
	project_category,
	project_type,
	project_build_type,
	project_fire_level,
	project_build_structure,
	project_industry,
	project_content,
	project_ident,
	project_design,
	project_floor_describe,
	project_exhaust_gas,
	project_is_piping,
	project_drainage,
	project_piping_type,
	project_gass_type,
	project_fire_fighting
} = proxy.useDict(
	'project_stage',
	'project_category',
	'project_type',
	'project_build_type',
	'project_fire_level',
	'project_build_structure',
	'project_industry',
	'project_content',
	'project_ident',
	'project_design',
	'project_floor_describe',
	'project_exhaust_gas',
	'project_is_piping',
	'project_drainage',
	'project_piping_type',
	'project_gass_type',
	'project_fire_fighting'
)

const router = useRouter()
const baseform = ref()
const customOption = ref([])
const options = ref([])
const route = useRoute()

selectCustom().then((res) => {
	customOption.value = res.map((e) => {
		return {
			label: e.customerName,
			value: e.customerId + ''
		}
	})
	options.value = customOption.value
	if (route.query.id) {
		form.customerId = route.query.id + ''
	}
})
const form = reactive({
	customerId: undefined,
	projectName: undefined,
	isImportant: '2',
	projectAdress: undefined,
	projectContacts: undefined,
	projectMobile: undefined,
	projectStage: '1',
	projectCategory: undefined,
	projectDescribe: undefined,
	projectType: undefined,
	projectBuildType: undefined,
	projectFireLevel: undefined,
	projectBuildStructure: undefined,
	projectSingleArea: undefined,
	projectTotalArea: undefined,
	projectCurrentFloor: undefined,
	projectTotalFloor: undefined,
	projectFloorHight: undefined,
	projectLiangHight: undefined,
	projectMinHight: undefined,
	projectDengHight: undefined,
	projectIndustry: undefined,
	projectContent: undefined,
	projectStaffNum: undefined,
	projectIdent: [],
	projectDesign: [],
	projectFloorDescribe: undefined,
	projectExhaustGas: [],
	projectAirDescribe: undefined,
	projectIsPiping: undefined,
	projectColdHot: undefined,
	projectStrongElectricity: undefined,
	projectDrainage: undefined,
	projectDrainageSize: undefined,
	projectPipingType: [],
	projectGassType: undefined,
	projectSharpDescribe: undefined,
	projectElevatorSize: undefined,
	projectFireFighting: undefined,
	progressFinishTime: undefined,
	projectDeviceBoList: []
})
const addItem = () => {
	form.projectDeviceBoList.push({
		deviceName: undefined,
		devicePower: undefined,
		deviceSize: undefined
	})
}
const deleteRow = (index) => {
	form.projectDeviceBoList.splice(index, 1)
}
const rules = {
	customerId: [{ required: true, message: '所属客户不能为空', trigger: 'blur' }],
	projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
	projectAdress: [{ required: true, message: '项目地址不能为空', trigger: 'blur' }],
	projectContacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
	projectMobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
	projectStage: [{ required: true, message: '项目阶段不能为空', trigger: 'blur' }],
	projectCategory: [{ required: true, message: '项目分类不能为空', trigger: 'blur' }],
	projectDescribe: [{ required: true, message: '项目描述不能为空', trigger: 'blur' }]
}
const toAddCustom = () => {
	router.push({
		path: '/customer/customerManage'
	})
}
const loading = ref(false)
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = customOption.value.filter((item) => {
				return item.label.toLowerCase().includes(query.toLowerCase())
			})
		}, 200)
	} else {
		options.value = customOption.value
	}
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			addProject({
				...form,
				projectIdent: form.projectIdent.join(','),
				projectDesign: form.projectDesign.join(','),
				projectExhaustGas: form.projectExhaustGas.join(','),
				projectPipingType: form.projectPipingType.join(',')
			}).then((res) => {
				proxy.$modal.msgSuccess('新增成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
.item-row {
	height: 50px;
	line-height: 50px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	display: flex;
	.item-col {
		flex: 3;
	}
}
</style>
